<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
<body>
	 <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<!--    <form class="layui-form layui-col-space5">  -->
						<div class="layui-inline layui-show-xs-block">
							<input id="search" type="text" name="username"
								placeholder="请输入用户名" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-inline layui-show-xs-block">
							<button class="layui-btn" lay-submit="" onclick="doGetObjects()"
								lay-filter="sreach">
								<i class="layui-icon">&#xe615;</i>
							</button>
						</div>
						<!-- <div>
                                <button type="button" class="layui-btn layui-btn-warm">Excel导出</button>
                                </div> -->
						<!--   </form>  -->
					</div>

					<div class="layui-card-header">
						<button class="layui-btn layui-btn-danger" onclick="delAll()">
							<i class="layui-icon"></i>删除
						</button>
						<button class="layui-btn" id="admin-add">
							<i class="layui-icon"></i>添加
						</button>
						</button>
						<!--    <button  class="layui-btn layui-btn-warm"  id="admin-derive">
                                <i class="layui-icon"></i>Excel导出
                                 
                                </button>
                             </div> -->

						<div class="layui-card-body ">
							<table class="layui-table">
								<thead>
									<tr>
										<!--  <th>
                                    <input type="checkbox" name=""  lay-skin="primary">
                                  </th> -->

										<th>ID</th>
										<th>登录名</th>
										<th>手机</th>
										<th>邮箱</th>
										<th>角色</th>
										<th>加入时间</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="tbodyId" type="cgb" ccc="100">
									<tr>
										<td></td>
										<!--    
                               <td>
                                    <input type="checkbox" name=""  lay-skin="primary">
                                  </td> 
                                  <td>1</td>
                                  <td>admin</td>
                                  <td>18925139284</td>
                                  <td>113664000@qq.com</td>
                                  <td>超级管理员</td>
                                  <td>2017-01-01 11:11:42</td>-->

									</tr>
							</table>
						</div>
						<div class="layui-card-body ">
							<div id="pageId" class="page"
								th:include="page.html :: pageFragement"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
//debugger;





//页面数据呈现模块及操作模块

    $(function(){
    	
     //初始化当前页码值
    // $("pageId").data("pagecurrent",1);
     //执行查询
    doGetObjects();
    //debugger
  //注册事件，用户添加
     $(".layui-show-xs-block")
	  .on("click",".layui-btn",doQueryObjects)
	  doLoadUI("admin-add","x/admin-add");

  /*   //注册事件，Excel导出
     $(".layui-show-xs-block") 
 	.on("click",".layui-btn layui-btn-warm",doQueryObjects)
 	doLoadUi("admin-derive","x/admin-derive");  */
    
    
    })



    function doQueryObjects(){
    	$("#pageId").data("pageCurrent",1);
    	
    	doGetObjects();
    }
    //通过此函数异步加载服务端的管理员列表  
    function doGetObjects(){
    	 //初始化全选checkbox对象状态
        $("#checkAll").prop("checked",false);
        //定义请求参数
        var pageCurrent=$("#pageId").data("pageCurrent");
        if(!pageCurrent)pageCurrent=1;
        
        //参数封装:
         let params={"pageCurrent":pageCurrent};
        
         var username=$("#search").val();
         
         if(username)params.username=username;
    	//2.定义请求url
    	const url="admin/findPageObjects"
    	//3.发送异步请求并处理响应结果
    	$.getJSON(url,params,function(result){
    		doHandleQueryResult(result);
    		
    	})
    }
    function doHandleQueryResult(result){//JsonResult
    if(result.state==1){//正常數據
    	//呈現当前页的管理员信息更新到页面上
    	doSetTableBodyRows(result.data.records);
    	//第二步:将分页信息更新到页面上
        doSetPagination(result.data);
    }else{
    	
    	doSetQueryErrors(result.message);
    }
 }
   
    function doSetTableBodyRows(records){
    	
    	//1.获取tbody对象并清空内容
    	var tBody=$("#tbodyId")
		tBody.empty();
    	
    /* 	//2.方法一：遍历records并将结果更新到页面上
    	for(var i=0;i<records.length;i++){
    		//构建一行tr对象
    		var tr=doCreateRow(records[i]);
    		//将tr追加到tbody中
    		
   		tBody.append(tr);
    		//alert(789);
    	}  */
    	records.forEach(record=>tBody.append(doCreateRow(record)));
    	
    }
  
    function doCreateRow(record){

    	return `<tr>
    				<!--<td><input type='checkbox' value=${record.a_id}/></td>-->
    				
    				<td>${record.a_id}</td>
    				<td>${record.a_name}</td>	
    				<td>${record.a_mobile}</td>
    				<td>${record.a_email}</td>
    				<td>${record.a_role}</td>
    				<td>${record.a_jointime}</td>
     				<td class="td-status">
                    <span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span></td>
                  <td class="td-manage">
                	  操作
                    <a onclick="member_stop(this,'10001')" href="javascript:;"  title="启用">
                      <i class="layui-icon">&#xe601;</i>
                    </a>
                    <a title="编辑" onclick="doFindObjectById(id)" id=${record.a_id} href="javascript:;">
                      <i  class="layui-icon">&#xe642;</i>
                    </a>
                    <a title="删除" onclick="member_del(id)" id=${record.a_id} href="javascript:;">
                      <i class="layui-icon">&#xe640;</i>
                    </a>
                  </td> 
    			</tr>`;
    }	
    

    
    
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var form = layui.form;
        
        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });
      });

       /*用户-停用*/
      function member_stop(obj,id){
          layer.confirm('确认要停用吗？',function(index){

              if($(obj).attr('title')=='启用'){

                //发异步把用户状态进行更改
                $(obj).attr('title','停用')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!',{icon: 5,time:1000});

              }else{
                $(obj).attr('title','启用')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!',{icon: 5,time:1000});
              }
              
          });
      }
       
       //获取选中的id
      /* function doGetCheckedIds(obj,id){
    	 
      	   //定义一个数组,用于存储选中的checkbox的id值
      	   var idArray=[];//new Array();
      	   //获取member_del中所有类型为checkbox的onclick元素
      	   $("#member_del onclick[type=onclick]").
      	   //迭代这些元素，每发现一个元素都会执行如下回调函数
      	   each(function(){
      		   //假如此元素的checked属性的值为true
      		   if($(this).prop("checked")){
      			   //调用数组对象的push方法将选中对象的值存储到数组
      			   idArray.push($(this).val());
      			 
      		   }
      	   });
      	 alert(idArray)
      	   return idArray;
      	 
       } */
     /*  function doGetCheckedIds(id){
    	
      } */
       
      /*用户信息修改*/
      /*用户页面编辑加载*/
     
      
      function doFindObjectById(id){
    	 
   	   //1.params
   	   var params={"id":id};
   	   //2.url
   	   var url="admin/doFindObjectById";
   	   //3.ajax request
   	   $.getJSON(url,params,function(adminresult){//JsonResult
   		   if(adminresult.state==1){
   			  $(".layui-show").data("rowData",adminresult.data);
   			
   			  doLoadEdit();
   			  
   		   }else{
   			  alert(adminresult.message);
   		   }
      });
      }
      
      function doLoadEdit(){
   	   var url="x/admin-edit";
   	   $(".layui-show").load(url) 
      }
      
      /*用户-删除*/
      function member_del(id){
        
        	  
        	  //按钮1的事件,定义处理删除操作的事件处理函数
        	
        		
	   		//1.1获取选中的id值
	   		//var idArray=doGetCheckedIds();//通过此函数返回一个数组，数组中存储的选中的ids
	   		 
	   		//1.1.1判断有无选中
	   		//if(!confirm)return;
	   		if(!confirm("确认删除吗？"))return;
        	 //2定义删除操作的url
        	 const url="admin/doDeleteObjects";
        	//3创建参数对象
 	   		var params={"ids":id};//[1,2,3]-->1,2,3
        	 //4 发异步请求执行删除操作
       	    $.post(url,params,doHandleDeleteResult)

          }
          //处理删除结果
         function doHandleDeleteResult(result){
        	  if(result.state==1){
             		
             		//并刷新页面
             		doGetObjects();
             		
             		}else{
             		alert("网络异常,请稍后再试");
             		
             		  }
          }
   
          
    

      		
      	
      
    </script>

<script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
      
  	</script>

<script type="text/javascript" src="lib/layui/layui.js"></script>
</html>